<!-- 销售规则 -->

<template>
  <el-form
    ref="formRef"
    :model="form.data"
    :disabled="form.status==='r'||form.submitting"
    :label-width="form.show&&isActive?'auto':undefined"
    class="commodity-form-module"
  >
    <!-- 价格 -->
    <div class="integrated">
      <!-- 是否显示商品原价规则：必选，1. true - 显示商品原价开关, 2. false - 清除商品原价(originalCost)字段 -->
      <el-form-item
        label="是否显示商品原价"
        prop="openOriginalCost"
        verify
      >
        <el-select
          style="width: 100%"
          v-model="form.data.openOriginalCost"
          placeholder="请选择是否开启原价显示"
        >
          <el-option
            v-for="item in $enum.ENUM_COMMODITY_SWITCH_PRICE_TYPE"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <!-- 商品原价规则： 必选，1）数值0 ~ 100000  2） 只能输入整数和小数点 3）浮点数保留精度2位 -->
      <!-- 关联影响：由于售价不能高于原价，所以原价改变，会重新校验售价(currentPrice)字段 -->
      <el-form-item
        v-if="showOriginalCost"
        label="商品原价(元)"
        prop="__originalCost"
        :verify="{ type: 'number', gte: 0, lte: 10000000 }"
        watch="currentPrice"
      >
        <PriceInput
          key="originalCost"
          v-model.trim="form.data.originalCost"
          :yuan.sync="form.data.__originalCost"
        />
      </el-form-item>

      <!-- 规则： 必选，1）数值0 ~ 100000  2） 只能输入整数和小数点  3）浮点数保留精度2位， 4）售价不能高于原价 -->
      <el-form-item
        label="商品售价(元)"
        prop="__currentPrice"
        :verify="{ type: 'number', gte: 0, lte: 10000000 }"
        :rules="{
          trigger: ['blur', 'change'],
          validator: (rule, value, callback) => {
              // 如果originalCost不存在直接跳过检查
              if (!form.data.originalCost) {
                  callback()
              }
              // 1. 售价不能高于原价
              if (
                  parseFloat(value) >
                  parseFloat(form.data.originalCost)
              ) {
                  return callback(
                      '商品售价不能高于商品原价'
                  )
              }
              callback()
          }
      }"
      >
        <PriceInput
          key="currentPrice"
          v-model.trim="form.data.currentPrice"
          :yuan.sync="form.data.__currentPrice"
        />
      </el-form-item>
    </div>

    <!-- 销售日期 -->
    <!-- 规则：必选, 1. 开始日期 >= 今天, 结束日期 >= 开始时间 -->
    <!-- 关联影响：
      1. 总销售时间类型(existEndTime)变换为false时 - 需要清除saltEndTime字段
      2. 总销售日期改变会重新校验游客可选游玩日日期范围字段
      3. 券类有效期时间不能早于总销售开始时间，所以总销售日期改变会重新校验券类有效期字段(validityBeginTime )
    -->
    <el-form-item
      label="总销售时间"
      prop="saltBeginTime"
      watch="validityBeginTime"
      verify
    >
      <sale-time
        type="datetime"
        style="width: 100%"
        :sale-time-type.sync="form.data.existEndTime"
        :start.sync="form.data.saltBeginTime"
        :end.sync="form.data.saltEndTime"
        @update:saleTimeType="
            value => {
                // 1. existEndTime类型变换false - 需要清除saltEndTime字段
                value === false &&
                    $set(
                        form.data,
                        'saltEndTime',
                        undefined
                    )
            }
        "
        :picker-options="{
            // picker-options只判断小于今天的日期不可选，至于开始日期需要小于结束日期由验证判断
            // 原因：1. 加入开始日期与结束日期禁用判断会导致用户某些情况下可选区域出现特殊情况(特别是以前设置的日期，过期后修改)
            //       2. picker-options的time参数只精确到了日期，对时刻都是取的00:00:00, 这造成根本就不能判断结束时刻与开始时刻的大小比较禁用
            startDisabledDate: (
                time,
                start,
                end
            ) => {
                // 开始日期大于等于今天
                const match1 = $dayjs(
                    time
                ).isBefore(
                    $dayjs().add('-1', 'day')
                )
                return match1
            },
            endDisabledDate: (time, start, end) => {
                // 结束日期大于等于今天
                const match1 = $dayjs(
                    time
                ).isBefore(
                    $dayjs().add('-1', 'day')
                )
                return match1
            }
        }"
        @change="
            value => {
                $refs['formRef'].validateField(
                    'saltBeginTime'
                )
            }
        "
        :disabled="form.status==='r'"
      />
    </el-form-item>

    <!-- 游玩日 -->
    <template v-if="state.businessTypeId==='1'">
      <!-- 规则：必选，可选游玩日期范围与可选游玩天数范围为互斥选项，二选一 -->
      <el-form-item
        label="游客可选游玩日类型"
        prop="validityType"
        verify
      >
        <el-select
          style="width: 100%"
          v-model="form.data.validityType"
          placeholder="请选择游客可选游玩日类型"
          @change="
            value => {
              // 规则：游客可选游玩日期与游客可选游玩天数是互斥选项，选中一个另一个需要置空
              // 天数范围 - 重置可选游玩时间范围
              if (
                value ===
                $enum
                    .ENUM_COMMODITY_OPTIONAL_PLAY_TYPE[0]
                    .value
              ) {
                $set(
                    form.data,
                    'validityBeginTime',
                    undefined
                )
                $set(
                    form.data,
                    'validityEndTime',
                    undefined
                )
                return
              }

              // 时间范围 - 重置可选游玩天数范围
              if (
                value ===
                $enum
                    .ENUM_COMMODITY_OPTIONAL_PLAY_TYPE[1]
                    .value
              ) {
                $set(
                    form.data,
                    'validityDays',
                    undefined
                )
                return
              }
            }
          "
        >
          <el-option
            v-for="item in $enum.ENUM_COMMODITY_OPTIONAL_PLAY_TYPE"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <!-- 规则：必选，可游玩日期基于销售日期
        1. 开始日期不能早于销售开始日期
        2. 结束日期不能晚于开始销售日期27天
        3. 可有玩日期范围 + 自动退/检票 <= 28
      -->
      <el-form-item
        v-if="showOptionalPlayByType('时间范围')"
        label="可选游玩日期范围"
        prop="validityBeginTime"
        verify
        :rules="{
          trigger: ['blur', 'change'],
          validator: (rule, value, callback) => {
            // 如果saltBeginTime不存在直接跳过检查
            if (!form.data.saltBeginTime) {
              callback()
            }
            // 1. 开始日期不能早于销售开始日期
            if (
              $dayjs(
                  form.data.validityBeginTime
              ).isBefore(
                  $dayjs(form.data.saltBeginTime)
              )
            ) {
              return callback(
                  '游客可选游玩日开始日期不能早于销售开始日期'
              )
            }
            // 2. 结束日期不能晚于开始销售日期27天
            if (
              $dayjs(
                  form.data.validityEndTime
              ).isAfter(
                  $dayjs(
                      form.data.saltBeginTime
                  ).add('27', 'days')
              )
            ) {
              return callback(
                  '游客可选游玩日结束日期不能晚于开始销售日期后27天'
              )
            }

            callback()
          }
        }"
      >
        <time-range-picker
          :start.sync="form.data.validityBeginTime"
          :end.sync="form.data.validityEndTime"
          @change="
            value =>
              $refs[`formRef`].validateField(
                  'autoCheckDays'
              )
          "
          :picker-options="{
            startDisabledDate: (
              time,
              start,
              end
            ) => {
              // 开始日期大于等于今天
              match1 = $dayjs(time).isBefore(
                  $dayjs().add('-1', 'day')
              )
              // 开始日期大于等于结束日期
              match2 =
                  end &&
                  $dayjs(time).isAfter(
                      $dayjs(end)
                  )
              // 开始日期大于等于销售开始日期
              match3 =
                  form.data.saltBeginTime &&
                  $dayjs(time).isBefore(
                      $dayjs(form.data.saltBeginTime)
                  )
              return match1 || match2 || match3
            },
            endDisabledDate: (time, start, end) => {
              // 结束日期大于等于今天
              match1 = $dayjs(time).isBefore(
                  $dayjs().add('-1', 'day')
              )
              // 结束日期不能 > 开始销售日期 + 27天
              // match2 = form.data.saltBeginTime && $dayjs(time).isAfter($dayjs(form.data.saltBeginTime).add('27', 'days'))
              return match1
            }
          }"
        />
        <form-item-tip>天数范围：1至27天。日期范围：1.开始日期不能早于销售开始日期。2.结束日期不能晚于开始销售日期后27天。购买时的天数范围：小于等于27天</form-item-tip>
      </el-form-item>

      <!-- 由于页面是由4个分表单实现，导致插件的watch校验不能在跨多个表单校验生效，暂时使用change事件时触发校验 -->
      <!-- 规则：必选，大小范围1 ~ 28 2. 可有玩日期范围 + 自动退/检票 <= 28-->
      <el-form-item
        v-if="showOptionalPlayByType('天数范围')"
        label="可选游玩天数范围"
        prop="validityDays"
        verify
        watch="autoCheckDays"
      >
        <SafeInputNumber
          style="width: 100%"
          v-model="form.data.validityDays"
          :min="1"
          :max="27"
          :precision="0"
          placeholder="游客可选多少天以内的日期作为游玩日，1至27天"
          @change="
              value =>
                  $refs[`formRef`].validateField(
                      'autoCheckDays'
                  )
          "
        />
        <form-item-tip>天数范围：1至27天。日期范围：1.开始日期不能早于销售开始日期。2.结束日期不能晚于开始销售日期后27天。购买时的天数范围：小于等于27天</form-item-tip>
      </el-form-item>
    </template>

    <!-- 库存 -->
    <div v-if="['1','3','5'].includes(state.businessTypeId)" class="integrated">
      <!-- 需要用户指定使用日规则：必选，默认值关闭 - 0 -->
      <!-- 关联影响：
        1. 会影响有效期范围(validityType)包含的列表选项
        2. 开关变化需要清除可预定日期(canUseDays)、不可预定日期(unavailableDates)、提前预定天数(aheadDays)字段
      -->
      <el-form-item
        label="需要用户指定使用日"
        prop="needUseDate"
        verify
        v-if="state.businessTypeId==='3'"
      >
        <div
          style="display: flex; align-items: center; height: 36px"
        >
          <el-switch
            v-model="form.data.needUseDate"
            :inactive-value="0"
            :active-value="1"
            @change="
            value => {
              // 1. 关闭时清除提前预定天数字段
              value === 0 &&
                $set(
                  form.data,
                  'aheadDays',
                  undefined
                )
              // 2. 关闭时清除validityType === 预定日当天有效类型
              value === 0 &&
                form.data.validityType === 2 &&
                $set(
                  form.data,
                  'validityType',
                  undefined
                )
              // 3. 清除可预定日期canUseDays
              value === 0 &&
                $set(
                  form.data,
                  'canUseDays',
                  undefined
                )
              // 4. 清除不可预定日期unavailableDates
              value === 0 &&
                $set(
                  form.data,
                  'unavailableDates',
                  undefined
                )
              // 5. 清除日限量库存（stockDayNum）/ 总限量库存字段（productTotal）/ 库存模式（repertoryType）
              value === 0 &&
                $set(
                  form.data,
                  'stockDayNum',
                  undefined
                )
              value === 0 &&
                $set(
                  form.data,
                  'productTotal',
                  undefined
                )
              value === 0 &&
                $set(
                  form.data,
                  'repertoryType',
                  undefined
                )
            }
          "
          />
          <form-item-tip style="margin-left: 15px; margin-top: 0;">需要用户指定使用日期开启后，可选择预订日当天有效</form-item-tip>
        </div>
      </el-form-item>

      <!-- 票务：必选，存在4种库存模式 -->
      <!-- 无限量库存, 用户不需要输入，清除productTotal、stockDayNum字段 -->
      <!-- 总限量库存, 用户需要输入总限量库存数目，清除stockDayNum字段 -->
      <!-- 日限量库存, 用户需要输入日限量库存数目，清除productTotal字段 -->
      <!-- 总限量库存 + 日限量库存, 用户需要输入总限量库存数目 + 日限量库存数目 -->
      <!-- 券类：必选，存在2种库存模式 -->
      <!-- 无限量库存, 用户不需要输入，清除productTotal、stockDayNum字段 -->
      <!-- 总限量库存, 用户需要输入总限量库存数目，清除stockDayNum字段 -->
      <el-form-item
        label="库存模式"
        prop="repertoryType"
        verify
      >
        <el-select
          style="width: 100%"
          v-model="form.data.repertoryType"
        >
          <el-option
            v-for="item in getRepertoryType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <!-- 规则：必选，1. 只能填写int，大小1 ~ 1000000 -->
      <!-- 关联影响：总库存数变化，会重新校验日库存字段 -->
      <el-form-item
        v-if="showTotalStock"
        :label="(state.businessTypeId==='5'||form.status==='c')? '总限量库存：': '总限量库存余量'"
        prop="productTotal"
        verify
        watch="stockDayNum"
      >
        <SafeInputNumber
          key="productTotal"
          style="width: 100%"
          v-model="getTotalStock"
          :min="0"
          :max="1000000"
          :precision="0"
          placeholder="请填写总限量库存"
        />
      </el-form-item>

      <!-- 规则：必选，1. 只能填写int，大小1 ~ 1000000 2. 日库存不能大于总库存数 -->
      <el-form-item
        v-if="['1','3'].includes(state.businessTypeId)&&showDayStock"
        label="日限量库存"
        prop="stockDayNum"
        verify
        :rules="{
          trigger: ['blur', 'change'],
          validator: (rule, value, callback) => {
            // 如果productTotal不存在 && 库存模式不是总库存 + 日库存 直接跳过检查
            if (
                !form.data.productTotal ||
                form.data.repertoryType !== 3
            ) {
                callback()
            }
            // 1. 日库存不能大于总库存数
            if (
                parseFloat(value) >
                parseFloat(form.data.productTotal)
            ) {
                return callback(
                    '日限量库存不能大于总限量库存数'
                )
            }
            callback()
          }
        }"
      >
        <SafeInputNumber
          key="stockDayNum"
          style="width: 100%"
          v-model="form.data.stockDayNum"
          :min="0"
          :max="1000000"
          :precision="0"
          placeholder="请填写日限量库存"
        />
      </el-form-item>

      <el-form-item
        v-if="state.businessTypeId==='1'&&form.data.repertoryType !== undefined"
      >
        <form-item-tip v-if="form.data.repertoryType === 0">当前模式下，非场次票没有库存限制，场次票受到场次库存限制</form-item-tip>
        <form-item-tip v-if="form.data.repertoryType === 1">当前模式下，门票受到总库存限制，场次票受到场次库存限制，设置库存后场次库存也会受到日库存和总库存限制</form-item-tip>
        <form-item-tip v-if="form.data.repertoryType === 2">当前模式下，门票受到日库存限制，场次票受到场次库存限制，设置库存后场次库存也会受到日库存和总库存限制</form-item-tip>
        <form-item-tip v-if="form.data.repertoryType === 3">当前模式下，门票受到总库存和日库存限制，场次票受到场次库存限制，设置库存后场次库存也会受到日库存和总库存限制</form-item-tip>
      </el-form-item>

      <!-- 规则：非必选， 默认值：0 -->
      <el-form-item
        v-if="state.businessTypeId==='1'"
        label="日历库存优先"
        prop="calendarStockFirst"
      >
        <el-switch
          v-model="form.data.calendarStockFirst"
          :active-value="1"
          :inactive-value="0"
          active-color="#13ce66"
          inactive-color="#909399"
        />
        <form-item-tip>1.日历库存优先开启后，有日历库存的日期均使用日历库存，没设置日历库存的日期使用当前设置库存。扣减日历库存时不会扣减当前设置库存。2.日历库存优先关闭时，不执行日历库存</form-item-tip>
      </el-form-item>

      <!-- 规则：必选 -->
      <!-- 关联影响：不按场次预订时，清除sessionList、sessionConsume字段 -->
      <el-form-item
        v-if="state.businessTypeId==='1'"
        label="是否按场次预订"
        prop="appointType"
        verify
      >
        <el-select
          style="width: 100%"
          v-model="form.data.appointType"
          placeholder="请选择是否按场次预订"
          @change="
              value => {
                  // 不按场次预订时，清除sessionList、sessionConsume字段
                  if (
                      value ===
                      $enum
                          .ENUM_COMMODITY_TICKET_APPOINT_TYPE[0]
                          .value
                  ) {
                      $set(
                          form.data,
                          'sessionList',
                          undefined
                      )
                      $set(
                          form.data,
                          'sessionConsume',
                          undefined
                      )
                      return
                  }
              }
          "
        >
          <el-option
            v-for="item in $enum.ENUM_COMMODITY_TICKET_APPOINT_TYPE"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <!-- 规则：必选，云景票务使用自己的分场预约,其他的默认启用第三方提供的分场预约 -->
      <el-form-item
        v-if="state.businessTypeId==='1'&&showAppointByType('是')"
        label="是否按场次检票"
        prop="sessionConsume"
        verify
      >
        <el-select
          style="width: 100%"
          v-model="form.data.sessionConsume"
          placeholder="请选择是否按场次检票"
        >
          <el-option
            v-for="item in $enum.ENUM_COMMODITY_TICKET_SESSION_CHECK_TYPE"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <!-- 规则：1.必选，云景票务使用自己的分场预约, 2.非必选：其他的默认启用第三方提供的分场预约 -->
      <el-form-item
        v-if="state.businessTypeId==='1'&&showAppointByType('是')"
        label="按每日多场次进行预约"
        prop="sessionList"
        :rules="{
            required: form.data.channelType === 1 || form.data.channelType === 22,
            message: '必填项',
            trigger: ['blur', 'change']
        }"
      >
        <!-- 云景票务使用自己的分场预约 -->
        <reserve-box
          v-if="form.data.channelType === 1 || form.data.channelType === 22"
          ref="reserveBox"
          v-model="form.data.sessionList"
          :stock-strategy="{
              repertoryType: form.data.repertoryType,
              productTotal: form.data.productTotal,
              stockDayNum: form.data.stockDayNum
          }"
        />
        <!-- 其他的默认启用第三方提供的分场预约 -->
        <i
          v-else
          class="el-icon-warning"
          style="color: orange; font-size: 16px"
        >
          默认根据票务提供商提供的商品场次进行预订</i
        >
      </el-form-item>
    </div>

    <!-- 预定日期 -->
    <div
      v-if="(state.businessTypeId==='3'&&form.data.needUseDate === 1)||state.businessTypeId==='4'"
      class="integrated"
    >
      <!-- 可预定日期规则: 必选，1. 默认全选中，至少选中一天 -->
      <!-- 显示：当needUseDate === 1 -->
      <el-form-item
        label="可预定日期"
        prop="canUseDays"
        verify
      >
        <week-tag
          style="width: 100%"
          v-model="form.data.canUseDays"
        />
      </el-form-item>

      <!-- 不可预定日期规则：可选，1. 多选 2. 永远显示当前日期之后的日期，已选的日期过期了需要过滤掉 -->
      <!-- 显示：当needUseDate === 1 -->
      <el-form-item
        label="不可预定日期"
        prop="unavailableDates"
      >
        <el-date-picker
          v-model="getUnavailableDates"
          type="dates"
          style="width: 100%"
          value-format="yyyy-MM-dd"
          placeholder="请选择不可使用日期"
          :picker-options="{
            disabledDate: time =>
              $dayjs(time).isBefore(
                  $dayjs().format('YYYY-MM-DD')
              )
          }"
        />
      </el-form-item>
    </div>

    <!-- 提前预定天数 -->
    <el-form-item
      v-if="state.businessTypeId==='3'&&form.data.needUseDate === 1"
      label="提前预定天数"
      prop="aheadDays"
      verify
    >
      <SafeInputNumber
        style="width: 100%"
        v-model="form.data.aheadDays"
        :min="0"
        :max="7"
        :precision="0"
        placeholder="0~7天, 填0表示则当天可预定"
      />
    </el-form-item>

    <!-- 有效期范围 -->
    <div v-if="state.businessTypeId==='3'" class="integrated">
      <!-- 有效期范围规则：必选
        1. 不需要用户指定使用日： ['时间范围', '天数范围']
        2. 需要用户指定使用日： ['时间范围', '天数范围', '预定日当天有效']
      -->
      <el-form-item
        label="有效期范围"
        prop="validityType"
        verify
      >
        <el-select
          style="width: 100%"
          v-model="form.data.validityType"
          placeholder="请选择有效期范围"
          @change="
            value => {
                // 1. 类型是时间范围， 清除validityDays字段
                if (value === 0) {
                    $set(
                        form.data,
                        'validityDays',
                        undefined
                    )
                    return
                }
                // 2. 类型是天数范围， 清除validityBeginTime / validityEndTime字段
                if (value === 1) {
                    $set(
                        form.data,
                        'validityBeginTime',
                        undefined
                    )
                    $set(
                        form.data,
                        'validityEndTime',
                        undefined
                    )
                    return
                }
                // 1. 类型是预定日当天有效， 清除validityDays / validityBeginTime / validityEndTime字段
                if (value === 2) {
                    $set(
                        form.data,
                        'validityDays',
                        undefined
                    )
                    $set(
                        form.data,
                        'validityBeginTime',
                        undefined
                    )
                    $set(
                        form.data,
                        'validityEndTime',
                        undefined
                    )
                    return
                }
            }
        "
        >
          <el-option
            v-for="item in getValidityType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <!-- 时间范围规则：必选，1. 券有效时间范围不能早于总销售开始时间 -->
      <!-- 显示：当validityType === '时间范围' -->
      <el-form-item
        v-if="
          form.data.validityType ===
            $enum.getEnumValueByEnumName(
                $enum.ENUM_COMMODITY_COUPON_VALID_TYPE,
                'TIME_RANGE'
            )
        "
        label="时间范围"
        prop="validityBeginTime"
        verify
        :rules="{
          trigger: ['blur', 'change'],
          validator: (rule, value, callback) => {
            // 如果saltBeginTime不存在直接跳过检查
            if (!form.data.saltBeginTime) {
                callback()
            }
            const saltBeginTime = $dayjs(
                form.data.saltBeginTime
            ).format('YYYY-MM-DD')
            // 1. 开始日期不能早于销售开始日期
            if (
                $dayjs(
                    form.data.validityBeginTime
                ).isBefore($dayjs(saltBeginTime))
            ) {
                return callback(
                    '券有效时间范围不能早于总销售开始时间'
                )
            }
            // 2. 结束日期不能早于销售开始日期
            if (
                $dayjs(
                    form.data.validityEndTime
                ).isBefore($dayjs(saltBeginTime))
            ) {
                return callback(
                    '券有效时间范围不能早于总销售开始时间'
                )
            }
            callback()
          }
      }"
      >
        <time-range-picker
          :start.sync="form.data.validityBeginTime"
          :end.sync="form.data.validityEndTime"
          :picker-options="{
            startDisabledDate: (
                time,
                start,
                end
            ) => {
                // 1. 开始日期小于等于结束日期
                const match1 =
                    end &&
                    $dayjs(time).isAfter(
                        $dayjs(end)
                    )
                // 2. 开始日期大于等于总销售开始时间
                const saltBeginTime = $dayjs(
                    form.data.saltBeginTime
                ).format('YYYY-MM-DD')
                const match2 = $dayjs(
                    time
                ).isBefore($dayjs(saltBeginTime))
                return match1 || match2
            },
            endDisabledDate: (time, start, end) => {
                // 1. 结束日期大于等于开始日期
                const match1 =
                    start &&
                    $dayjs(time).isBefore(
                        $dayjs(start)
                    )
                // 2. 结束日期大于等于总销售开始时间
                const saltBeginTime = $dayjs(
                    form.data.saltBeginTime
                ).format('YYYY-MM-DD')
                const match2 = $dayjs(
                    time
                ).isBefore($dayjs(saltBeginTime))
                return match1 || match2
            }
          }"
        />
      </el-form-item>

      <!-- 天数范围规则：必选，1. 只能填整数 2. 最小值1 -->
      <!-- 显示：当validityType === '天数范围' -->
      <el-form-item
        v-if="
          form.data.validityType ===
            $enum.getEnumValueByEnumName(
                $enum.ENUM_COMMODITY_COUPON_VALID_TYPE,
                'DAY_RANGE'
            )
        "
        label="天数范围"
        prop="validityDays"
        verify
      >
        <SafeInputNumber
          style="width: 100%"
          v-model="form.data.validityDays"
          :min="1"
          :max="100000"
          :precision="0"
          placeholder="请输入天数范围，最小值1，最大值100000"
        />
      </el-form-item>
    </div>

    <!-- 邮费 -->
    <el-form-item
      v-if="state.businessTypeId==='5'"
      label="邮费模式"
      prop="freeShipping"
      verify
    >
      <el-select
        style="width: 100%"
        v-model="form.data.freeShipping"
        placeholder="请选择邮费模式"
      >
        <el-option
          v-for="item in $enum.ENUM_COMMODITY_GOODS_FREE_SHIPPING_TYPE"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>

    <!-- 退款 -->
    <div class="integrated">
      <!-- 是否可退款规则：必选 -->
      <el-form-item
        v-if="state.businessTypeId!=='1'"
        label="退款模式"
        prop="returnSet"
        verify
      >
        <el-select
          style="width: 100%"
          v-model="form.data.returnSet"
          placeholder="请选择是否可以退款"
        >
          <el-option
            v-for="item in getReturnSet"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <!-- 可退款期限规则：必选，1. 只能填整数 2. 范围 1 ~ 25 -->
      <!-- 显示：当returnSet === '可以退款' -->
      <el-form-item
        v-if="
          state.businessTypeId==='3' &&
          form.data.returnSet &&
              form.data.returnSet !==
                  $enum.getEnumValueByEnumName(
                      $enum.ENUM_COMMODITY_RETURN_SET_TYPE,
                      'NOT_CAN_RETURN'
                  )
        "
        label="可退款期限"
        prop="returnDays"
        verify
      >
        <SafeInputNumber
          style="width: 100%"
          v-model="form.data.returnDays"
          :min="1"
          :max="28"
          :precision="0"
          placeholder="不超过有效期的情况下，多少天内可以退款。1 ~ 28天"
        />

        <el-form-item>
          <form-item-tip>券类商品，在有效期范围内，最长28天内可退款。可退款的订单，未手动核销时，超过可退款期限自动结算，用户在有效期内仍可使用。不可退款的订单，未手动核销时，默认超过28天自动结算，用户在有效期内仍可使用。已结算的订单，后台不可手动退款。</form-item-tip>
        </el-form-item>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
import mixin from './mixin'
import SaleTime from '../components/SaleTime.vue'
import WeekTag from '../components/weekTag.vue'
import ReserveBox from '../components/reserve/index.vue'

export default {
  name: 'SaleRule',
  components: { SaleTime, WeekTag, ReserveBox },
  mixins: [mixin],
  data () {
    return {}
  },
  computed: {
    // 酒店退款只支持 1. 可以退款，需要审核 2. 不可退款，后台可手动退款
    // 实物退款只支持 1. 可以退款，需要审核 2. 不可退款，后台可手动退款
    getReturnSet () {
      switch (this.state.businessTypeId) {
        case '3':
          return this.$enum.ENUM_COMMODITY_RETURN_SET_TYPE
        case '4':
        case '5':
          return [
            this.$enum.ENUM_COMMODITY_RETURN_SET_TYPE[0],
            this.$enum.ENUM_COMMODITY_RETURN_SET_TYPE[2]
          ]
      }
    },
    // 显示游玩类型 - 根据传入的类型
    showOptionalPlayByType (type) {
      return type => {
        const match = this.$enum.getEnumValueByLabel(
          this.$enum.ENUM_COMMODITY_OPTIONAL_PLAY_TYPE,
          type
        )
        return this.form.data?.validityType === match
      }
    },
    // 显示预约类型 - 根据传入的类型
    showAppointByType (type) {
      return type => {
        const match = this.$enum.getEnumValueByLabel(
          this.$enum.ENUM_COMMODITY_TICKET_APPOINT_TYPE,
          type
        )
        return this.form.data?.appointType === match
      }
    },
    // 规则：退票规则选择不可退款类型时，要禁用自动退票选项
    getReturnSetDisabled (value) {
      return value => {
        const returnSet =
          this.form.data.returnSet ===
          this.$enum.ENUM_COMMODITY_RETURN_SET_TYPE[0].value
        const match =
          value ===
          this.$enum.ENUM_COMMODITY_TICKET_EXPIRE_TYPE[1].value
        return returnSet && match
      }
    },
    getRepertoryType () {
      switch (this.state.businessTypeId) {
        case '1':
          return this.$enum.ENUM_COMMODITY_STOCK_TYPE
        // 券类只支持无限库存和总限量库存两种
        case '3':
          if (this.form.data.needUseDate === 0) {
            return [
              this.$enum.ENUM_COMMODITY_STOCK_TYPE[0],
              this.$enum.ENUM_COMMODITY_STOCK_TYPE[1]
            ]
          } else {
            return this.$enum.ENUM_COMMODITY_STOCK_TYPE
          }
        // 实物只支持无限库存和总限量库存两种
        case '5':
          return [
            this.$enum.ENUM_COMMODITY_STOCK_TYPE[0],
            this.$enum.ENUM_COMMODITY_STOCK_TYPE[1]
          ]
      }
    },
    // 实物退款只支持 1. 可以退款，需要审核 2. 不可退款，后台可手动退款
    getGoodReturnSet () {
      return [
        this.$enum.ENUM_COMMODITY_RETURN_SET_TYPE[0],
        this.$enum.ENUM_COMMODITY_RETURN_SET_TYPE[2]
      ]
    },
    // 获取有效期范围与需要用户指定使用日关联
    getValidityType () {
      // 不需要用户指定使用日
      if (this.form.data.needUseDate === 0) {
        return this.$enum.ENUM_COMMODITY_COUPON_VALID_TYPE.filter(
          item => item.value === 0 || item.value === 1
        )
        // 需要用户指定使用日
      } else {
        return this.$enum.ENUM_COMMODITY_COUPON_VALID_TYPE
      }
    },
    // 规则：永远显示当前日期之后的日期，已选的日期过期了需要过滤掉
    getUnavailableDates: {
      get () {
        if (!this.form.data.unavailableDates) return undefined
        const now = this.$dayjs().format('YYYY-MM-DD')
        return this.form.data.unavailableDates.filter(time =>
          this.$dayjs(time).isSameOrAfter(now)
        )
      },
      set (val) {
        this.$set(this.form.data, 'unavailableDates', val)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.date-range :deep(.el-date-editor) {
  width: 100% !important;
}

.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  color: #1890ff;
  background: none;
}
</style>
